<template>
  <div class="p-far" style="height:95%">
    <div class="crumbs">
      <router-link to="/">首页</router-link>/
      <span>审批中心</span> /
      <span>施工单位管理</span> /
      <span class="active">施工单位</span>
    </div>
    <el-radio-group v-model="tabPosition" class="mb-20">
      <el-radio-button v-for="(item, index) in tabList" :key="index" :label="index">{{ item }}</el-radio-button>
    </el-radio-group>
    <div style="width:80%" class="mt-20 fs-15 fw-b" v-if="tabPosition==0">
      <div class="info">
        <div class="item">
          <div class="label">单位名称：</div>
          <div>山东某某建筑工程有限公司</div>
        </div>
        <div class="item">
          <div style="width:23%">统一社会信用代码：</div>
          <div>91370102MA3Q45BR2U</div>
        </div>
      </div>
      <div class="info">
        <div class="item">
          <div class="label">法定代表人：</div>
          <div>张某</div>
        </div>
        <div class="item">
          <div class="label">注册资本：</div>
          <div>2320万元人民币</div>
        </div>
      </div>
      <div class="info">
        <div class="item">
          <div class="label">成立日期：</div>
          <div>2019年2月14日</div>
        </div>
      </div>
      <div class="info">
        <div class="item">
          <div class="label">注册地址：</div>
          <div>山东省济南市历下区奥体西路XXXXXXXXXXXXX</div>
        </div>
      </div>
      <div class="info">
        <div class="flex">
          <div style="width:38%">经营范围：</div>
          <div>一般项目：太阳能热发电装备销售；太阳能发电技术服务；园林绿化工程施工；建筑材料销售；环境保护专用设备销售；工程和技术研究和试验发展；软件开发；技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；金属门窗工程施工；工程管理服务；消防器材销售；安全技术防范系统设计施工服务；计算机软硬件及辅助设备批发；人工智能行业应用系统集成服务；第一类医疗器械销售；第二类医疗器械销售；消防技术服务；工程造价咨询业务。（除依法须经批准的项目外，凭营业执照依法自主开展经营活动）许可项目：建设工程施工；建筑劳务分包；施工专业作业；建设工程设计；建设工程质量检测；第三类医疗器械经营；建筑物拆除作业（爆破作业除外）。（依法须经批准的项目，经相关部门批准后方可开展经营活动，具体经营项目以相关部门批准文件或许可证件为准）</div>
        </div>
      </div>
      <div class="info">
        <div class="item">
          <div class="label">审批时间：</div>
          <div>2023年11月29日</div>
        </div>
      </div>
      <div class="info">
        <div class="item">
          <div class="label">星级评价：</div>
          <el-rate
            value="5"
            disabled
            allow-half
            score-template="{value}"
            :colors="['#6dbc71','#6dbc71','#6dbc71']"
          ></el-rate>
        </div>
      </div>
      <div class="p-right">
        <div />
        <div>
          <el-button size="small" type="primary" class="mr-20">通过</el-button>
          <el-button size="small" type="danger">拒绝</el-button>
        </div>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%" v-else-if="tabPosition==1">
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="资质类型" align="center"></el-table-column>
      <el-table-column prop="address" label="证书编号" align="center"></el-table-column>
      <el-table-column prop="address" label="资质名称" align="center"></el-table-column>
      <el-table-column prop="address" label="发证日期" align="center"></el-table-column>
      <el-table-column prop="address" label="有效期至" align="center"></el-table-column>
      <el-table-column prop="address" label="发证机关" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="tableData" style="width: 100%" v-else>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
      <el-table-column prop="name" label="施工类型" align="center"></el-table-column>
      <el-table-column prop="name" label="施工内容" align="center"></el-table-column>
      <el-table-column prop="name" label="施工负责人" align="center"></el-table-column>
      <el-table-column prop="name" label="审批人" align="center"></el-table-column>
      <el-table-column label="施工评分" align="center">
        <el-rate
          value="5"
          disabled
          allow-half
          score-template="{value}"
          :colors="['#6dbc71','#6dbc71','#6dbc71']"
        ></el-rate>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="施工详情" :visible.sync="dialogVisible" width="50%">
      <div class="fs-16">
        <div class="mb-20">项目名称：111</div>
        <div class="mb-20">施工类型：111</div>
        <div class="mb-20">施工内容：111</div>
        <div class="mb-20">施工照片：111</div>
        <div class="mb-20 flex">
          施工评分：
          <el-rate
            value="5"
            disabled
            allow-half
            score-template="{value}"
            :colors="['#6dbc71','#6dbc71','#6dbc71']"
          ></el-rate>
        </div>
        <div class="mb-20">施工评价：111</div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: ["单位信息", "资质证件", "施工记录"],
      tabPosition: 0,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      dialogVisible: false
    };
  },
  methods: {
    handleDetail() {
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  .label {
    width: 17%;
  }
  .item {
    display: flex;
    width: 50%;
  }
}
</style>